<script setup>
import { useRouter } from "vue-router";
import { useMessageStore } from "@/store";
import { getAllRegistrationsByUid, cancelRegistration } from "@/api/message";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { SUCCESS } from "@/core/constants/HttpStatus";

const router = useRouter();
const messageStore = useMessageStore();

const gotoAppliDetail = (id) => {
  const query = { registrationId: id };
  router.push({ path: "/messages/detail", query });
};

const PageSize = 6;
let currentPage = ref(1); //当前页数
let total = ref(0); //申请总数
let appliList = ref([]); //申请信息列表

const loadPage = async (pageNum) => {
  try {
    const res = await getAllRegistrationsByUid({
      current: pageNum || 1,
      size: PageSize,
    });
    console.log(res);
    const { code, data, msg } = res.data;
    if (code == SUCCESS) {
      appliList.value = data.records;
      total.value = Number(data.total);
    } else {
      ElMessage.error(msg);
    }
  } catch {
    ElMessage.error(error.message || "获取信息失败");
  }
};

onMounted(() => {
  loadPage(currentPage.value);
  messageStore.sendApplyState();
});

const handleCurrentChange = (val) => {
  currentPage.value = val;
  loadPage(currentPage.value);
};

const gotoTeamDetail = (tpId) => {
  const query = { tpId: tpId };
  router.push({ path: "/teamUp/detail", query });
};

const cancel = async (riId) => {
  try {
    const res = await cancelRegistration({ riId: riId });
    console.log(res);
    const { code, msg } = res.data;
    if (code == SUCCESS) {
      ElMessage.success(msg);
      loadPage(currentPage.value);
    } else {
      ElMessage.error(msg);
    }
  } catch {
    ElMessage.error(error.message || "取消失败");
  }
};
</script>
<template>
  <div class="main-right">
    <!-- 顶部页面标题 -->
    <div class="top-title">
      <span class="title">我的队伍申请</span>
    </div>
    <!-- 申请列表展示 -->
    <ul class="apply-list">
      <!-- 申请内容 -->
      <li class="apply-content" v-for="(item, index) in appliList" :key="index">
        <div class="team-msg">
          <a>
            <p @click="gotoTeamDetail(item.teamId)">
              向&emsp;<span>{{ item.teamName }}</span
              >&emsp;队伍提交了入队申请
            </p>
            <br />
            <p>队长：{{ item.leaderId }}&emsp;{{ item.leaderName }}</p>
          </a>
        </div>
        <div class="status-msg">
          <el-tag v-if="item.status == 0">未审核</el-tag>
          <el-tag v-else-if="item.status == 1" type="success">已通过</el-tag>
          <el-tag v-else-if="item.status == 2" type="error">已拒绝</el-tag>
          <el-tag v-else type="warning">已取消</el-tag>
        </div>
        <div class="time-msg">
          <p class="button-line">
            <el-button round @click="gotoAppliDetail(item.registrationId)"
              >查看详情</el-button
            >
            <el-button round @click="cancel(item.registrationId)"
              >取消申请</el-button
            >
          </p>
          <p v-if="item.status == 0">申请时间：{{ item.applyTime }}</p>
          <p v-else-if="item.status == 3">取消时间：{{ item.cancelTime }}</p>
          <p v-else>审核时间：{{ item.checkTime }}</p>
        </div>
      </li>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          layout="prev, pager, next"
          :total="total"
          :page-size="PageSize"
          :hide-on-single-page="false"
        >
        </el-pagination>
      </div>
    </ul>
  </div>
</template>
<style scoped lang="less">
// 顶部页面标题
.top-title {
  font-size: 18px;
  font-weight: bolder;
  width: 88%;
  background-color: #fafafa;
  margin-left: 65px;
  text-align: left;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #f2f2f2;
  .title {
    margin-left: 15px;
  }
}
.apply-list {
  margin: 10px auto;
  padding: 0px 10px;
  width: 88%;
  height: auto;
  background-color: #fafafa;
  margin-left: 65px;
  border-radius: 5px;
  border: 1px solid #f2f2f2;

  .apply-content {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 10px 5px;
    margin-top: 10px;
    border-bottom: 1px solid #d7d7d7;

    .team-msg {
      width: 40%;
      margin-left: 20px;

      a {
        color: black;

        p > span {
          font-weight: 700;
          width: 110px;
          max-width: 110px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: inline-block;
        }

        p:nth-of-type(1) {
          font-size: 18px;
          display: flex;
          align-items: flex-end;
        }

        p:nth-of-type(2) {
          font-size: 14px;
          color: #626262;
        }
      }
    }

    .status-msg {
      width: 30%;
      display: flex;
      justify-content: center; /* 水平居中 */

      .el-tag {
        --el-tag-font-size: 16px;
        width: 80px;
        height: 30px;
      }
    }

    .time-msg {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: space-between;
      width: 30%;
      margin-right: 50px;
      .button-line {
        margin-bottom: 5px;
      }

      p {
        font-size: 13px;
        color: #7b7b7b;
      }
    }
  }
}
</style>